<template>
    <div>
        <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator 
                mui-segmented-control mui-segmented-control-inverted" data-scroll="1">
					<div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
							推荐
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							热点
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
							北京
						</a>
						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
							社会
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							娱乐
						</a>
						<a class="mui-control-item" href="#item6mobile" data-wid="tab-top-subpage-6.html">
							科技
						</a>
						<a :class="['mui-control-item',item.id == 0?'mui-avtive':'']" v-for="item in cates" :key="item.id" 
						@click="getPhotoListByCateId(item.id)"
						>
							{{item.title}}
						</a>
					</div>
					<!--图片列表区域-->
					<ul class="photo-list">
						<router-link v-for="item in list" :key="item.id" to="'/home/photoinfo/' + item.id" tag="li">
							<img v-lazy="item.img_url" >
							<div class="info">
								<h1 class="info-title">{{item.title}}}</h1>
								<div class="info-body">{{item.zhaiyao}}</div>
							</div>
						</router-link>
						<router-link  to="'/home/photoinfo/' + item.id" tag="li">
							<img v-lazy="'https://inews.gtimg.com/newsapp_bt/0/4656858127/1000'" >
							<div class="info">
								<h1 class="info-title">小米MIX3发布时间曝光升降镜头 外形超vivo NEX</h1>
								<div class="info-body">小米将极有可能在9月20日这天发布MIX3这款手机，目前供应链已经完成了它的测试工作，如果不...</div>
							</div>
						</router-link>
					</ul>
					<ul class="photo-list">
						<router-link v-for="item in list" :key="item.id" to="'/home/photoinfo/' + item.id" tag="li">
							<img v-lazy="item.img_url" >
							<div class="info">
								<h1 class="info-title">{{item.title}}}</h1>
								<div class="info-body">{{item.zhaiyao}}</div>
							</div>
						</router-link>
						<router-link  to="'/home/photoinfo/' + item.id" tag="li">
							<img v-lazy="'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180811/ca14f433f8b3455dae38b9bbf96bfa2d.jpeg'" >
							<div class="info">
								<h1 class="info-title">iPhone9拥有3种屏幕，采用华为价，果粉表示很良心</h1>
								<div class="info-body">根据媒体的报道，以及往年的经验，苹果今年的新品发布会，很可能就是在9月中旬左右，去年是...</div>
							</div>
						</router-link>
					</ul>
				</div>
			</div>
        <h3>
            图片分享
        </h3>
    </div>
</template>

<script>
import mui from '../../lib/mui/css/mui.min.css'



export default{
    data() {
        return{
			cates: [],
			list: []
		}
    },
    created() {
		this.getAllcategory()
		this.getPhotoListByCateId(0)
	},
    methods: {
		getAllcategory() {
			//获取所以图片分类
			this.$http.get('api/getnewslist').then(result => {
				if(result.body.status === 0){
					//手动拼装出完整的分类
					this.body.message.unshift({title: "全部", id: 0})
					this.cates = result.body.message
				}
			})
		},
		getPhotoListByCateId(cateId) {
			this.$http.get('api/getimages/' +cateId)
			.then(result => {
				if(result.body.status === 0){
					this.list = result.body.status
				}
			})
		}
    }
    
}
    
</script>

<style lang="scss" scoped>
.mui-scroll{
	background-color: #26a2ff;
	color: white;
}
.photo-list{
	list-style: none;
	margin: 0;
	padding: 10px;
	padding-bottom: 0;
	margin-top: 38px;
	li{
		background-color: #ccc;
		text-align: center;
		margin-bottom: 10px;
		box-shadow: 0 0 6px #999;
		position: relative;
		img{
			
			width: 100%;
			vertical-align: middle;
		}
		img[lazy="loading"] {
		width: 40px;
		height: 300px;
		margin: auto;
		}
		.info{
			position: absolute;
			bottom: 0;
			background-color: rgba(0,0,0,0.4);
			text-align: left;
			color: white;
			max-height: 84px;
			.info-title{
				font-size: 14px;
			}
			.info.body{
				font-size: 13px;
				webkit-line-clamp:3;
				text-overflow:ellipsis;
			}
		}
	}
}

</style>

